<template>
  <EditOrViewTable :table-data="tableData" :type="type" :setting="setting" />
</template>
<script>
import EditOrViewTable from './editOrViewTable'
export default {
  name: 'AddrTable',
  components: {
    EditOrViewTable
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'view'
    },
    showEditAddrCode: {
      type: Boolean,
      default: false
    },
    startObserve: {
      type: Boolean,
      default: false
    },
    customerCode: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      setting: [
        {
          prop: 'name',
          label: '收货地址名称',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.name,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'name', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'provinceName',
          label: '所在省',
          required: this.type === 'edit',
          minWidth: 200,
          overflowHidden: false,
          editRender: (h, row) => {
            return h('c-common-search-province', {
              props: {
                value: row.province,
                label: row.provinceName,
                valueKey: 'id',
                placeholder: '请选择'
              },
              on: {
                input: v => this.$set(row, 'province', v),
                'update:label': v => this.$set(row, 'provinceName', v)
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'cityName',
          label: '所在市',
          required: this.type === 'edit',
          minWidth: 200,
          overflowHidden: false,
          editRender: (h, row) => {
            return h('c-common-search-not-province', {
              props: {
                value: row.city,
                label: row.cityName,
                valueKey: 'id',
                dependOnObserve: row.province,
                startObserve: this.startObserve,
                disabled: !row.province,
                parentId: row.province
              },
              attrs: {
                clearable: true
              },
              on: {
                input: v => this.$set(row, 'city', v),
                'update:label': v => this.$set(row, 'cityName', v)
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'countyName',
          label: '所在区/县',
          required: this.type === 'edit',
          minWidth: 200,
          overflowHidden: false,
          editRender: (h, row) => {
            return h('c-common-search-not-province', {
              props: {
                value: row.county,
                label: row.countyName,
                valueKey: 'id',
                dependOnObserve: row.city,
                startObserve: this.startObserve,
                disabled: !row.city,
                parentId: row.city
              },
              attrs: {
                clearable: true
              },
              on: {
                input: v => this.$set(row, 'county', v),
                'update:label': v => this.$set(row, 'countyName', v)
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'townName',
          label: '所在街道/乡镇',
          required: this.type === 'edit',
          minWidth: 200,
          overflowHidden: false,
          editRender: (h, row) => {
            return h('c-common-search-not-province', {
              props: {
                value: row.town,
                label: row.townName,
                valueKey: 'id',
                dependOnObserve: row.county,
                startObserve: this.startObserve,
                disabled: !row.county,
                parentId: row.county
              },
              attrs: {
                clearable: true
              },
              on: {
                input: v => this.$set(row, 'town', v),
                'update:label': v => this.$set(row, 'townName', v)
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'address',
          label: '详细地址',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.address,
                placeholder: '请输入',
                clearable: true,
                autosize: { minRows: 1 }
              },
              attrs: {
                placeholder: '请输入',
                clearable: true,
                autosize: { minRows: 1 }
              },
              on: {
                input: v => {
                  this.$set(row, 'address', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'firstReceiver',
          label: '第一联系人姓名',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.firstReceiver,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'firstReceiver', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'firstReceiverTel',
          label: '第一联系人电话',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.firstReceiverTel,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'firstReceiverTel', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'firstReceiverPhone',
          label: '第一联系人手机',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.firstReceiverPhone,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'firstReceiverPhone', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'secondReceiver',
          label: '第二联系人姓名',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.secondReceiver,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'secondReceiver', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'secondReceiverTel',
          label: '第二联系人电话',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.secondReceiverTel,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'secondReceiverTel', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'secondReceiverPhone',
          label: '第二联系人手机',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.secondReceiverPhone,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'secondReceiverPhone', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        }
      ]
    }
  },
  watch: {
    showEditAddrCode: {
      handler(v) {
        if (v) {
          this.setting.unshift({
            prop: 'code',
            label: '收货地址编码',
            minWidth: 200,
            fixed: 'left',
            required: true,
            render: (h, row) => {
              return h('c-common-search-addr', {
                props: {
                  value: row.code,
                  label: row.name,
                  formatLabel: v => v.code,
                  customerCode: this.customerCode,
                  disabled: !this.customerCode
                },
                attrs: {
                  clearable: true
                },
                on: {
                  change: v => this.handleAddressCodeChange(v, row)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          })
        } else {
          const i = this.setting.findIndex(e => e.prop === 'code')
          if (i >= 0) {
            this.setting.splice(i, 1)
          }
        }
      },
      immediate: true
    }
  },
  created() {
    this.rowKeys = 'address changeCode changeType city cityName code county countyName firstReceiver firstReceiverPhone firstReceiverTel isBefore isChange name province provinceName secondReceiver secondReceiverPhone secondReceiverTel simpleName thirdReceiver thirdReceiverPhone thirdReceiverTel town townName'.split(' ')
  },
  methods: {
    handleAddressCodeChange(v, row) {
      this.rowKeys.forEach(k => {
        const _k = `_${k}`
        if (!row._flag) {
          row[_k] = row[k]
        }
        if (!v) {
          this.$set(row, k, row[_k])
        } else {
          this.$set(row, k, v[k] !== undefined ? v[k] : '')
        }
      })
      row._flag = true
    },
    validate() {
      const regPhone = /^1\d{10}$/
      const regTel = /^[0-9]{3,4}-?[0-9]{7,8}$/
      const requiredKeys = {
        name: '收货地址名称',
        provinceName: '所在省',
        cityName: '所在市',
        countyName: '所在区/县',
        // townName: '所在街道/乡镇',
        address: '详细地址',
        firstReceiver: '第一联系人姓名',
        firstReceiverTel: '第一联系人电话',
        firstReceiverPhone: '第一联系人手机'
      }
      const errMsgs = []
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i]
        if (item.firstReceiverPhone && !regPhone.test(item.firstReceiverPhone)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行第一联系人手机格式!`)
        }
        if (item.secondReceiverPhone && !regPhone.test(item.secondReceiverPhone)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行第二联系人手机格式!`)
        }
        // 电话
        if (item.firstReceiverTel && !regTel.test(item.firstReceiverTel)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行第一联系人电话格式!`)
        }
        if (item.secondReceiverTel && !regTel.test(item.secondReceiverTel)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行第二联系人电话格式!`)
        }
        // 必填
        for (const [k, msg] of Object.entries(requiredKeys)) {
          const v = item[k]
          if (v === undefined || v === null || v === '') {
            errMsgs.push(`【${this.title}】第${i + 1}行【${msg}】必填(选)!`)
          }
        }
      }
      if (errMsgs.length > 0) {
        this.$message({
          type: 'warning',
          message: errMsgs.join('<br>'),
          dangerouslyUseHTMLString: true
        })
        return Promise.reject(errMsgs)
      }
      return Promise.resolve(this.tableData)
    }
  }
}
</script>
